<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/goods.css">
</head>
<body>
  <section class="container">
    <!-- banner -->
    <header class="banner">
      <img src="./img/banner03.jpg" alt="">
      <ul class="points clearfix">
        <li></li>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ul>
    </header>
    <!-- info -->
    <section class="info">
      <h2 class="title">冲绳黑糖拿铁</h2>
      <div class="tag">
        <span>新品</span>
        <span>可做热饮</span>
      </div>
      <div class="desc">
        <p>商品详情</p>
        <p>经典日式冲绳黑糖风味拿铁，黑糖与咖啡的美妙融合，香甜温暖、自然醇厚，口感绵长（建议到店饮用，奶油融化前 口感更佳）
        </p>
        <p>主要原材料：浓缩咖啡、牛奶、黑糖调味糖浆、原味调味糖 浆、可选择添加搅打奶油（含香草风味糖浆）</p>
        <p>图片仅供参考，请以实物为准，建议取餐后尽快饮用。</p>
      </div>
    </section>
    <!-- attr -->
    <section class="attr">
      <div class="attr-item">
        <p>温度</p>
        <span class="active">冰</span>
        <span>热</span>
      </div>
      <div class="attr-item">
        <p>糖度</p>
        <span>全糖</span>
        <span class="active">半糖</span>
      </div>
      <div class="attr-item">
        <p>奶油</p>
        <span class="active">默认奶油</span>
        <span>无奶油</span>
      </div>
    </section>
    <!-- prop -->
    <section class="prop">
      <div class="prop-l">
        <span class="price">￥19.9</span>
        <p class="desc">冲绳黑糖拿铁￥19.9+热+半糖+默认奶油</p>
      </div>
      <div class="prop-r">
        <img src="./img/jianhao.png" alt="">
        <span class="count">1</span>
        <img src="./img/jiahao.png" alt="">
      </div>
    </section>
    <!-- bottom -->
    <footer class="bottom clearfix">
      <span class="add fl">加入购物车</span>
      <span class="buy fr">立即购买</span>
    </footer>
  </section>
</body>
</html>
